<template>
	<div class="containers">
		<div class="video-box" ref="videoBox">
			<video class="video-style" ref="videos" @ended="videoEnded" @play="videoPlay" @pause="videoPause"
				@enterpictureinpicture="enterpictureinpicture" @leavepictureinpicture="leavepictureinpicture">
        <!-- <source src="../../static/video/video01.mp4" type="video/mp4" /> -->
			</video>
			<div class="video-model">
				<div class="page-index" ref="homeTitle">
					<div class="page-title wrap" ref="pageTitle">
						<h1>点亮智慧未来 电力与创新同行</h1>
					</div>
					<div class="page-sub" ref="pageSub">
						<span>您的发电专家！</span>
					</div>
				</div>
				<div class="video-btn" ref="videoBtn">
					<div class="btn-item" @click="handlePlay">
						<img :src="videoOptions.playIcon">
					</div>
					<div class="btn-item" @click="handleMuted">
						<img :src="videoOptions.mutedIcon">
					</div>
					<div class="btn-item" @click="handleFullScreen">
						<img src="../../static/img/icon/full-screen.png">
					</div>
					<div class="btn-item" @click="pictureInPicture">
						<img :src="videoOptions.pictureInPictureIcon">
					</div>
				</div>
			</div>
		</div>
		<!--第二部分-->
		<!--第三部分-->
		<div class="wrap text-center pt-60">
			<div class="company">
				<div class="name aboutAnimation">
					<h1 ref="aboutAnimation01">广西弗兰鑫有限电气公司</h1>
					<p ref="aboutAnimation02">专注发电机</p>
				</div>
				<div class="companyImg wrap">
					<img ref="companyImg" src="../../static/img/shenzhen.svg">
				</div>
				<div class="companyInfos wraps">
					<p ref="companyInfos"> 广西弗兰鑫电气有限公司成立于XX年，由一群充满热情和经验丰富的电
						气工程师和业务专业人员共同创立。公司成立
						之初，我们深刻认识到电力作为现代社会不可或缺
						的基础资源，对经济发展和生活质量至关重要。</p>
				</div>
				<div class="about-us wrap" ref="aboutUs">
					了解更多
				</div>
			</div>
		</div>

		<!--第四部分-->
		<div class="service" ref="services">
			<div class="serviceInfo">
				<div class="service-name" ref="serviceName">
					<span>我们的服务</span>
				</div>
				<h1 style="font-size: 43px" class="service-title" ref="serviceTitle">发电机销售</h1>
				<div class="info service-infos" ref="serviceInfos">
					<p>在电力的世界中，我们照亮您的前行。从创新设计到高效维护，为您提供全方位的电气服务，让能源流动更安全、更可靠，让生活更美好。选择我们，选择电力的未来。</p>
				</div>
				<div class="about-us-server wrap" ref="servicebtn">
					了解更多
				</div>
			</div>

		</div>

		<!--第五部分-->
		<div style="height: 1500px;">
			<div class="product">
				<div class="title-p">
					<h2 ref="productTitleZhCn">我们的产品</h2>
					<h1 ref="productTitleEnUs" style="font-size: 40px">WE ARE PRODUCTS</h1>
				</div>
				<div class="swiper-animation" ref="swiperAnimation">
					<div class="SwiperBox" @mouseenter="MouseFun('移入')" @mouseleave="MouseFun('移出')">
						<!-- 图片 -->
						<div class="list" v-for="(item,index) in product" :key="index">
							<img :class="['imgCss',ShowImg==index?'ShowCss':'']" :src="item.imgUrl" :key="index" />
							<div :class="['InfoCss',ShowImg==index?'ShowCss':'']">
								<h1 ref="swiperName">{{item.name}} </h1>
								<p ref="swiperInfo">{{item.info}}</p>
							</div>
						</div>
						<!-- 左箭头按钮 -->
						<div class="leftBtn btnImgCss" @click="throttle(PrevFun)">
							<img src="../../static/img/leftBtn.png" alt="leftBtn">
						</div>
						<!-- 右箭头按钮 -->
						<div class="rightBtn btnImgCss" @click="throttle(NextFun)">
							<img src="../../static/img/rightBtn.png" alt="rightBtn">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
	import Foots from "../../components/foot/Foot";
	export default {
		components: {
			Foots
		},
		data() {
			return {
				videoOptions: {
					play: true,
					playIcon: require('../../static/img/icon/play-one.png'),
					muted: true,
					mutedIcon: require('../../static/img/icon/volume-notice.png'),
					fullScreen: false,
					pictureInPictures: true,
					pictureInPictureIcon: require('../../static/img/icon/full-screen-play.png'),
				},
				isUpAndDown: 0,
				companyList: [{
						imgUrl: require("@/static/img/banner/banner3.jpg"),
						title: '创新融合，共筑未来',
						sub: "弗兰鑫电气，文化铸就卓越。"
					},
					{
						imgUrl: require("@/static/img/banner/banner4.jpg"),
						title: '专业融合，技术引领',
						sub: "弗兰鑫电气，用专业点亮每一个角落。"
					},
					{
						imgUrl: require("@/static/img/banner/banner2.jpg"),
						title: '服务驱动，品质见证',
						sub: "弗兰鑫电气，用心服务，创造共赢。"
					},
				],
				companyShow: 0,
				ShowImg: 0, // 表示当前显示的图片
				flag: true, // 用来节流防止重复点击
				start: null, // 自动执行下一张定时器
				currentIndex: 0,
				carouselItems: [{
						imageSrc: require("@/static/img/gs.png"),
						imageAlt: '公司图片',
						text: '点亮未来，弗兰鑫电气与您共创辉煌！',
					},
					{
						imageSrc: require("@/static/img/gs.png"),
						imageAlt: '公司图片',
						text: '点亮未来，弗兰鑫电气与您共创辉煌！',
					},
					{
						imageSrc: require("@/static/img/gs.png"),
						imageAlt: '公司图片',
						text: '点亮未来，弗兰鑫电气与您共创辉煌！',
					},
				],
				bannerHeight: 400, //图片父容器的高度
				screenWidth: 0, //屏幕的宽度
			}
		},
		computed: {
			product() {
				return [{
					imgUrl: require("@/static/product/wew.jpg"),
					name: this.$t("volvoUnit.name"),
					info: this.$t("volvoUnit.introduce")
				}, {
					imgUrl: require("@/static/product/pjs.jpg"),
					name: this.$t("perkinsUnit.name"),
					info: this.$t("perkinsUnit.introduce")
				}, {
					imgUrl: require("@/static/product/kms.jpg"),
					name: this.$t("cumminsUnit.name"),
					info: this.$t("cumminsUnit.introduce")
				}, {
					imgUrl: require("@/static/product/sc.jpg"),
					name: this.$t("upperEngineUnit.name"),
					info: this.$t("upperEngineUnit.introduce")
				}, {
					imgUrl: require("@/static/product/ntp.jpg"),
					name: this.$t("nanTongPaouUnit.name"),
					info: this.$t("nanTongPaouUnit.introduce")
				}, {
					imgUrl: require("@/static/product/wd.jpg"),
					name: this.$t("nonMovingUnit.name"),
					info: this.$t("nonMovingUnit.introduce")
				}, {
					imgUrl: require("@/static/product/yc.jpg"),
					name: this.$t("yuchaiDisesl.name"),
					info: this.$t("yuchaiDisesl.introduce")
				}, {
					imgUrl: require("@/static/product/hc.jpg"),
					name: this.$t("weiChaiUnit.name"),
					info: this.$t("weiChaiUnit.introduce")
				}, {
					imgUrl: require("@/static/product/wmdl.jpg"),
					name: this.$t("weiManUnit.name"),
					info: this.$t("weiManUnit.introduce")
				}, {
					imgUrl: require("@/static/product/kk.jpg"),
					name: this.$t("keKeUnit.name"),
					info: this.$t("keKeUnit.introduce")
				}]
			}
		},
		methods: {
			// 视频播放结束
			videoEnded() {
				this.$refs.videos.currentTime = 0
				this.videoPause()
			},
			// 视频播放
			videoPlay() {
				this.videoOptions.play = false
				this.videoOptions.playIcon = require('../../static/img/icon/pause.png')
				this.$refs.pageTitle.style.animation = "hiddens 0.8s ease-out forwards"
				this.$refs.pageSub.style.animation = "hiddens 0.6s ease-out forwards"
			},
			// 视频暂停
			videoPause() {
				this.videoOptions.play = true
				this.videoOptions.playIcon = require('../../static/img/icon/play-one.png')
				this.$refs.pageTitle.style.animation = "fadeInDowns 0.6s ease-out forwards"
				this.$refs.pageSub.style.animation = "fadeInDowns 0.8s ease-out forwards"
			},
			// 播放视频
			handlePlay() {
				if (this.videoOptions.play) {
					this.$refs.videos.play()
				} else {
					this.$refs.videos.pause()
				}
			},
			// 视频静音
			handleMuted() {
				if (this.videoOptions.muted) {
					this.$refs.videos.muted = true;
					this.videoOptions.muted = false
					this.videoOptions.mutedIcon = require('../../static/img/icon/volume-mute.png')
				} else {
					this.$refs.videos.muted = false;
					this.videoOptions.muted = true
					this.videoOptions.mutedIcon = require('../../static/img/icon/volume-notice.png')
				}
			},
			// 全屏
			handleFullScreen() {
				if (this.$refs.videos.mozRequestFullScreen) {
					this.$refs.videos.mozRequestFullScreen(); //火狐浏览器
				} else if (this.$refs.videos.webkitRequestFullscreen) {
					this.$refs.videos.webkitRequestFullscreen(); //谷歌浏览器
				} else if (this.$refs.videos.oRequestFullscreen) {
					this.$refs.videos.oRequestFullscreen(); //opera浏览器
				} else if (this.$refs.videos.msRequestFullscreen) {
					this.$refs.videos.msRequestFullscreen(); //ie浏览器
				} else if (this.$refs.videos.requestFullscreen) {
					this.$refs.videos.requestFullscreen();
				}
			},
			// 画中画
			pictureInPicture(i) {
				if (this.videoOptions.pictureInPictures) {
					this.$refs.videos.requestPictureInPicture()
				} else {
					document.exitPictureInPicture()
				}
			},
			// 进入画中画模式时候执行
			enterpictureinpicture() {
				this.videoOptions.pictureInPictures = false
				this.videoOptions.pictureInPictureIcon = require('../../static/img/icon/square.png')
			},
			// 退出画中画模式时候执行
			leavepictureinpicture() {
				this.videoOptions.pictureInPictures = true
				this.videoOptions.pictureInPictureIcon = require('../../static/img/icon/full-screen-play.png')
			},
			MouseFun(type) { // 停止定时器            // 重新执行定时器
				type == '移入' ? clearTimeout(this.start) : this.setTimeoFun()
			},
			setTimeoFun() {
				this.start = setInterval(() => {
					this.NextFun()
				}, 5000)
			},
			// 这里通过额外封装的节流函数触发 PrevFun() 和 NextFun(),以达到防止重复点击的效果
			throttle(fun) {
				if (this.flag) {
					this.flag = false;
					fun(); // 此为模板中传递进来的PrevFun()或NextFun()函数
					setTimeout(() => {
						this.flag = true;
					}, 1200); // 节流间隔时间
				}
			},
			companyPrevFun() {
				if (this.companyShow !== 0) {
					this.companyShow--
				} else {
					this.companyShow = this.companyList.length - 1
				}
			},
			companyNextFun() {
				if (this.companyShow !== this.companyList.length - 1) {
					this.companyShow++
				} else {
					this.companyShow = 0
				}
			},
			// 上一张
			PrevFun() {
				if (this.ShowImg !== 0) {
					this.ShowImg--
				} else {
					this.ShowImg = this.product.length - 1
				}
			},
			// 下一张
			NextFun() {
				if (this.ShowImg !== this.product.length - 1) {
					this.ShowImg++
				} else {
					this.ShowImg = 0
				}
			},
			setSize() {
				// 通过屏幕宽度(图片宽度)计算高度
				this.bannerHeight = 400 / 1920 * this.screenWidth;
			},
			initiateAnimation() {
				this.$refs.pageTitle.style.animation = "fadeInDowns 0.66s ease-out forwards"
				this.$refs.pageSub.style.animation = "fadeInDowns 0.6s ease-out forwards"
				this.$refs.videoBtn.style.animation = "fadeInDowns 0.6s ease-out 0.6s forwards"
			},
			animationShow() {
				var innerHeights = window.innerHeight

				if (this.$refs.videoBox) {
					// 视频滚动离开当前屏幕时暂停视频
					if (this.$refs.videoBox.getBoundingClientRect().bottom <= 0 && document.pictureInPictureElement ==
						null) {
						this.$refs.videos.pause()
					}
					// 动画执行
					// 第三部分
					if (innerHeights - this.$refs.aboutAnimation01.getBoundingClientRect().top > 30) {
						this.$refs.aboutAnimation01.style.animation = "fadeInDowns 0.5s ease forwards"
					} else {
						this.$refs.aboutAnimation01.style.animation = "none"
						this.$refs.aboutAnimation01.style.opacity = "0"
					}
					if (innerHeights - this.$refs.aboutAnimation02.getBoundingClientRect().top > 30) {
						this.$refs.aboutAnimation02.style.animation = "fadeInDowns 0.6s ease forwards"
					} else {
						this.$refs.aboutAnimation02.style.animation = "none"
						this.$refs.aboutAnimation02.style.opacity = "0"
					}
					if (innerHeights - this.$refs.companyImg.getBoundingClientRect().top > 30) {
						this.$refs.companyImg.style.animation = "fadeInDowns 0.7s ease forwards"
					} else {
						this.$refs.companyImg.style.animation = "none"
						this.$refs.companyImg.style.opacity = "0"
					}
					if (innerHeights - this.$refs.companyInfos.getBoundingClientRect().top > 30) {
						this.$refs.companyInfos.style.animation = "fadeInDowns 0.6s ease forwards"
					} else {
						this.$refs.companyInfos.style.animation = "none"
						this.$refs.companyInfos.style.opacity = "0"
					}
					if (innerHeights - this.$refs.aboutUs.getBoundingClientRect().top > 30) {
						this.$refs.aboutUs.style.animation = "fadeInDowns 0.7s ease forwards"
					} else {
						this.$refs.aboutUs.style.animation = "none"
						this.$refs.aboutUs.style.opacity = "0"
					}
					// 第四部分
					if (innerHeights - this.$refs.services.getBoundingClientRect().top > 30) {
						this.$refs.services.style.animation = "fadeInDowns 0.6s ease forwards"
					} else {
						this.$refs.services.style.animation = "none"
						this.$refs.services.style.opacity = "0"
					}
					if (innerHeights - this.$refs.serviceName.getBoundingClientRect().top > 30) {
						this.$refs.serviceName.style.animation = "fadeInDowns 0.5s ease forwards"
					} else {
						this.$refs.serviceName.style.animation = "none"
						this.$refs.serviceName.style.opacity = "0"
					}
					if (innerHeights - this.$refs.serviceTitle.getBoundingClientRect().top > 30) {
						this.$refs.serviceTitle.style.animation = "fadeInDowns 0.6s ease forwards"
					} else {
						this.$refs.serviceTitle.style.animation = "none"
						this.$refs.serviceTitle.style.opacity = "0"
					}
					if (innerHeights - this.$refs.serviceInfos.getBoundingClientRect().top > 30) {
						this.$refs.serviceInfos.style.animation = "fadeInDowns 0.7s ease forwards"
					} else {
						this.$refs.serviceInfos.style.animation = "none"
						this.$refs.serviceInfos.style.opacity = "0"
					}
					if (innerHeights - this.$refs.servicebtn.getBoundingClientRect().top > 30) {
						this.$refs.servicebtn.style.animation = "fadeInDowns 0.8s ease forwards"
					} else {
						this.$refs.servicebtn.style.animation = "none"
						this.$refs.servicebtn.style.opacity = "0"
					}
					// 第五部分
					if (innerHeights - this.$refs.productTitleZhCn.getBoundingClientRect().top > 30) {
						this.$refs.productTitleZhCn.style.animation = "fadeInDowns 0.6s ease forwards"
					} else {
						this.$refs.productTitleZhCn.style.animation = "none"
						this.$refs.productTitleZhCn.style.opacity = "0"
					}
					if (innerHeights - this.$refs.productTitleEnUs.getBoundingClientRect().top > 30) {
						this.$refs.productTitleEnUs.style.animation = "fadeInDowns 0.7s ease forwards"
					} else {
						this.$refs.productTitleEnUs.style.animation = "none"
						this.$refs.productTitleEnUs.style.opacity = "0"
					}
					if (innerHeights - this.$refs.swiperAnimation.getBoundingClientRect().top > 30) {
						this.$refs.swiperAnimation.style.animation = "fadeInDowns 0.8s ease forwards"
					} else {
						this.$refs.swiperAnimation.style.animation = "none"
						this.$refs.swiperAnimation.style.opacity = "0"
					}
					this.$refs.swiperName.forEach((i) => {
						if (innerHeights - i.getBoundingClientRect().top > 30) {
							i.style.animation = "fadeInDowns 0.6s ease forwards"
						} else {
							i.style.animation = "none"
							i.style.opacity = "0"
						}
					})
					this.$refs.swiperInfo.forEach((i) => {
						if (innerHeights - i.getBoundingClientRect().top > 30) {
							i.style.animation = "fadeInDowns 0.7s ease forwards"
						} else {
							i.style.animation = "none"
							i.style.opacity = "0"
						}
					})
				}

			}
		},
		created() {

		},
		mounted() {
			this.initiateAnimation()
			window.addEventListener("scroll", this.animationShow);

			this.setTimeoFun()

			//录播图片自适应
			this.screenWidth = window.innerWidth;
			this.setSize();
			window.onresize = () => {
				this.screenWidth = window.innerWidth;
				this.setSize();
			};
		}
	}
</script>

<style scoped>
	/* 视频区域 */
	.video-box {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.video-box .video-style {
		width: 100%;
		height: 100vh;
		object-fit: cover;
	}

	.video-model {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
	}

	.video-btn {
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		width: 100%;
		opacity: 0;
	}

	.btn-item {
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		margin: 20px;
		transition: 0.6s;
	}

	.btn-item:hover {
		background-color: rgba(255, 255, 255, 0.3);
		cursor: pointer;
	}

	.btn-item:nth-child(1) img {
		width: 27px;
	}

	.btn-item:nth-child(2) img {
		width: 20px;
	}

	.btn-item:nth-child(3) img {
		width: 20px;
	}

	.btn-item:nth-child(4) img {
		width: 20px;
	}

	.page-index {
		margin-top: 280px;
		width: 100%;
		text-align: center;
		color: #fff;
		transition: 0.8s;
	}

	.page-index .page-title h1 {
		font-size: 50px;
		/* color: #333333; */
		font-weight: bolder;
	}

	.page-title {
		/* visibility: hidden; */
		/* opacity: 0; */
	}

	.page-index .page-sub span {
		font-size: 25px;
		/* color: #333333; */
		padding: 10px;
	}

	.page-sub {
		/* visibility: hidden; */
		/* opacity: 0; */
	}

	/* 第二部分 */
	

	/*公司信息*/
	.company {
		position: relative;
		width: 100%;
		height: auto;
	}

	.company h1 {
		opacity: 0;
	}

	.company p:nth-child(2) {
		opacity: 0;
		font-size: 20px;
		padding: 40px 0 10px 0;
	}

	.company p:nth-child(1) {
		opacity: 0;
	}

	.companyImg img {
		height: 550px;
		width: 900px;
		object-fit: cover;
		opacity: 0;
	}

	.companyInfo {
		width: 700px;
		line-height: 1.4;
		font-weight: bolder;
	}

	.about-us {
		margin-top: 20px;
		width: 200px;
		height: 40px;
		border-radius: 20px;
		line-height: 40px;
		border: 2px solid black;
		font-size: 20px;
		font-weight: bolder;
		transition: all 0.3s;
		opacity: 0;
	}

	.about-us:hover {
		cursor: pointer;
		background-color: black;
		color: #ffffff;
	}

	.about-us-server {
		margin-top: 20px;
		width: 200px;
		height: 40px;
		border-radius: 20px;
		line-height: 40px;
		border: 2px solid #ffffff;
		font-size: 20px;
		font-weight: bolder;
		transition: all 0.3s;
	}

	.about-us-server:hover {
		cursor: pointer;
		background-color: #ffffff;
		color: black;
	}

	/*服务*/
	.service {
		position: relative;
		top: 200px;
		width: 100%;
		height: 700px;
		background: url("../../static/img/homeB.jpg") no-repeat;
		background-size: cover;
		font-weight: bolder;
		line-height: 1.4;
		opacity: 0;
	}

	.service .serviceInfo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		color: #ffffff;
	}

	.info {
		margin: auto;
		width: 800px;
	}

	/*产品*/
	.product {
		position: relative;
		top: 400px;
		width: 100%;
		height: 800px;
	}

	.title-p {
		text-align: center;
		width: 500px;
		margin: auto;
		line-height: 1.4;
	}

	.title-p h1 {
		opacity: 0;
	}

	.title-p h2 {
		opacity: 0;
	}

	.companyInfos {
		margin: 20px auto;
		width: 70%;
	}

	/* 图片容器样式  轮播图*/
	.SwiperBox {
		position: relative;
		top: 35%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 800px;
		box-sizing: border-box;
		cursor: pointer;
	}

	/* 图片默认样式 */
	.imgCss {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 800px;
		height: 500px;
		transform: translate(-50%, -50%);
		opacity: 0;
		transition: 1.2s;
		/* 淡入淡出过渡时间 */
	}

	.swiper-animation {
		opacity: 0;
		width: 100%;
		height: 100%;
	}

	.InfoCss {
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 55%;
		text-align: center;
		line-height: 2;
		height: 116px;
		transform: translate(-50%, 0);
		opacity: 0;
		transition: 1.2s;
		/* 淡入淡出过渡时间 */
	}

	.InfoCss h1 {
		opacity: 0;
	}

	.InfoCss p {
		opacity: 0;
	}

	/* 图片选中样式(继承上方默认样式) */
	.ShowCss {
		opacity: 1;
	}

	/* 两个按钮共有的样式,也可直接使用箭头图片替代 */
	.leftBtn,
	.rightBtn {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		line-height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #333333;
		font-weight: bolder;
		border: 2px solid #333333;
		border-radius: 50%;
		cursor: pointer;
		font-size: 25px;
		font-weight: 500;
	}

	.leftBtn {
		left: 20px;
	}

	.rightBtn {
		right: 20px;
		transition: 0.5s;
	}

	.btnImgCss:hover {
		background-color: rgba(0, 0, 0, 0.1);
	}

	.btnImgCss img {
		width: 20px;
		height: 20px;
	}
</style>
